<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>绿色对话留言板</title>
  <style>
    body { font-family: 'Segoe UI'; background: #e8f5e9; margin: 0; padding: 20px; }
    h1 { text-align: center; color: #2e7d32; }
    .input { display: flex; justify-content: center; gap: 10px; margin: 20px; }
    textarea { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #81c784; }
    button { background: #2e7d32; color: #fff; padding: 10px 20px; border: none; border-radius: 6px; }
    #board { max-width: 600px; margin: auto; }
    .message { background: #a5d6a7; padding: 10px 15px; border-radius: 20px; margin: 10px 0; position: relative; }
    .message button { position: absolute; top: 5px; right: 10px; background: #388e3c; border: none; color: #fff; padding: 2px 8px; border-radius: 5px; }
  </style>
</head>
<body>
  <h1>好友留言板</h1>
  <div class="input">
    <textarea id="msgInput" rows="2" placeholder="输入留言..."></textarea>
    <button onclick="add()">发送</button>
  </div>
  <div id="board"></div>
<script>
  const k="greenBoard"; let arr=JSON.parse(localStorage.getItem(k))||[];
  function render(){
    let b=document.getElementById("board"); b.innerHTML="";
    arr.forEach((m,i)=>{let d=document.createElement("div");d.className="message";d.innerHTML=`${m}<button onclick="del(${i})">删</button>`;b.appendChild(d);});
  }
  function add(){let t=document.getElementById("msgInput");if(t.value.trim()){arr.push(t.value.trim());localStorage.setItem(k,JSON.stringify(arr));t.value="";render();}}
  function del(i){arr.splice(i,1);localStorage.setItem(k,JSON.stringify(arr));render();}
  render();
</script>
</body>
</html>
